<template>
	<view class="payment">
		<view class="header">
			<image class="headerReturn" src="/static/images/productDetails/ht.png" mode="" @tap="back()"></image>
			<view class="headerTitle">
				支付
			</view>
			<view class="">

			</view>
		</view>
		<view class="paymentText">
			<view class="">
				鲨漏订单-
			</view>
			<view class="">
				22551235232565959562303
			</view>
			<view class="money">
				¥25.85
			</view>
			<view class="receivePay">
				<view class="">
					收款方
				</view>
				<view class="platform">
					鲨漏商城 <text>平台商户</text>
				</view>

			</view>
			<view class="successBtn">
				<view class="" @click="open">
					立即支付
				</view>
			</view>
		</view>
		<uni-popup class="uniPopupBtn " ref="popup" type="center" :animation="true" borderRadius='10px 10px 10px 10px'>
			是否放弃本次付款？
			<view class="uniPopupBtn">
			 <view class="giveup" @tap="close()">
			 	放弃
			 </view>	
			 <view class="continue">
			 	 继续付款
			 </view>
			 
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			open() {
				this.$refs.popup.open('top')
			},
			close() {
				this.$refs.popup.close()
			},
			back() {
				// 返回上一级页面
				uni.redirectTo({
					url:'/pages/user/obligation?status=0' // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #F9F9F9;
	}

	.payment {
		margin-top: 100rpx;
	}

	.header {
		display: flex;
		padding: 0 18rpx;
		justify-content: space-between;
		box-sizing: border-box;
		background: #F9F9F9;
		height: 44px;

		.headerTitle {
			flex: 1;
			text-align: center;
			position: absolute;
			width: 100%;
			left: 0;
			z-index: -1;
		}

		.headerReturn {
			width: 40rpx;
			height: 40rpx;
			cursor: pointer;
		}

		.returnIdex {
			border-radius: 13px;
			border: 1px solid #6954D5;
			color: #6954D5;
			font-size: 22rpx;
			padding: 0 20rpx;
		}
	}

	.paymentText {
		text-align: center;
		font-size: 32rpx;
		margin-top: 140rpx;

		.money {
			font-size: 56rpx;
			margin: 20rpx 0;
		}

		.platform {
			text {
				color: #999;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}

		.receivePay {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			padding: 30rpx 40rpx;

		}

		.successBtn {
			width: 520rpx;
			height: 80rpx;
			background: #6954D5;
			line-height: 80rpx;
			border-radius: 40rpx;
			color: #fff;
			margin: auto;
			margin-top: 80rpx;
		}
	}
	.uniPopupBtn{
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		.giveup,
		.continue{
			width: 300rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #DDDDDD;
			border-radius: 23px;
			margin: 20rpx;
			color: #fff;
			margin-top: 40rpx;
		}
		.continue{
			background-color: #6954D5;
			color: #fff;
		}
			::v-deep  .uni-popup__wrapper-box{
				border-radius: 18rpx;
			}
	}
</style>